<template>
   <div class="w-100" v-if="datadetail">
        <!--1-->
        <div class="row center_nav container fs18">
            <div @click="$router.go(-1)" class="col-xs-4 navleft"><span class="glyphicon glyphicon-menu-left"></span><span>返回</span></div>
            <div class="col-xs-8">结算</div>
        </div>
        <!--2-->
        <div class="meals_time fs12">送餐时间：{{datadetail.created_at}}</div>
        <!--3-->
        <div class="meals_time1 fs12">送餐地址：{{datadetail.address}}</div>
        <!--4-->
        <div class="meals_time fs12" @click="newsdetail">取餐人：{{user_name}} {{user_mobile}}</div>
        <!--5-->
        <div class="star fs17">美地星球</div>
         <!--6-->
        <div class="detail_border">
            <div class="detailorder" v-for="item of congif">
                <div class="pull-left"><img class="detail_img" :src="item.pic" alt=""></div>
                <div class="pull-left twodetail">
                        <div>{{item.dish_name}}</div>
                        <div>*{{item.dishes_id}}</div> 
                </div>
                <div class="pull-right threedetail">
                        <div>{{item.dish_price | pricefilter}}</div>
                </div>
            </div>
        </div>
        <!--7-->
        <div class="allcondition">
            <span class="pull-right">共两件商品，实付￥15.5元</span>
        </div>
         <!--8-->
        <div class="bottomnav">
            <div class="bottom_one">合计:{{datadetail.pay_money}}元</div>
            <div class="bottom_two" @click="wechat_pay">立即支付</div>
        </div>
        <!--9-->
        <div class="allpayshow" v-if="newsshow">
            <div class="allpayshow_floor">
                 <div class="row center_nav1 container">
                    <div @click="close" class="col-xs-4 navleft"><span>关闭</span></div>
                    <div class="col-xs-8 xiugai">修改信息</div>
                </div>
                 <div class="main pb44">
                    <div class="box-line bd-t10 pt10">
                        <div class="box-content">
                            <span class="box-text">姓名：</span>
                            <div class="box-input"><input type="phone" placeholder="请输入的您的姓名" v-model="nameinput"></div>
                        </div>
                    </div>
                    <div class="box-line pt10">
                        <div class="box-content">
                            <span class="box-text">手机号：</span>
                            <div class="box-input"><input type="phone" placeholder="请输入手机号码" v-model="phoneinput"></div>
                            <!--<button class="box-button">验证码</button>-->
                        </div>
                    </div>
                    <!--<div class="box-line pt10">
                        <div class="box-content">
                            <span class="box-text">验证码：</span>
                            <div class="box-input pr0"><input type="text" placeholder="请输入验证码"></div>
                        </div>
                    </div>       -->
                    <div class="box-line pt20">
                    <button class="button-submit" @click="submit_input">提交</button>
                    </div>        
                </div>
            </div>
        </div>
   </div>
</template>
<script>
    import axios from 'axios'
    import wx from 'weixin-js-sdk'
    export default {
        name: 'commit',
        data () {
            return {
                newsshow:false,
                // totalyuan:0,
                datadetail:null,
                congif:null,
                name:null,
                phone:null,
                nameinput:null,
                phoneinput:null,
                user_name:null,
                user_mobile:null,
            }
        },
        methods:{
            newsdetail:function(){
                this.newsshow=true; 
            },
            close:function(){
                this.newsshow=false; 
            },
            wechat_pay:function(){ 
                console.log(this.user_name);
                console.log(this.user_mobile);
                if(this.user_name=='' || this.user_mobile==''){
                    console.log("========")
                    this.newsshow=true;
                }
                else{
                     wx.chooseWXPay({
                        appId: this.$store.state.appId,
                        timestamp: this.$store.state.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: this.$store.state.nonceStr, // 支付签名随机串，不长于 32 位
                        package: this.$store.state.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                        signType: this.$store.state.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: this.$store.state.paySign, // 支付签名
                        success: function (res) {
                            // 支付成功后的回调函数
                            if(res.errMsg == 'chooseWXPay:ok') {
                                window.location.href="http://www.baidu.com";
                            }else{
                                alert("支付失败，请返回重试。");
                            }
                        },
                        fail: function (res) {
                            alert("支付失败，请返回重试。系统错误，请联系管理员。" + res.errMsg);
                        }
                    });
                }
            },
            submit_input:function(){
                this.newsshow = false;
                console.log(this.nameinput);
                console.log(this.phoneinput);
                console.log(this.unique_id);
                let param = new URLSearchParams();
                param.append("order_id", this.unique_id);
                param.append("user_name",this.nameinput);
                param.append("user_mobile",this.phoneinput);
                axios.post(this.$store.state.url +  this.$store.state.urlchild.phone + '?token=' + this.$store.state.tokenhongqi, param)
                .then((res)=>{
                    console.log(res);
                    this.user_name=res.data.data.user_name;
                    this.user_mobile=res.data.data.user_mobile;
                    console.log(this.nameinput);
                    console.log(this.phoneinput);   
                })  
            },
        },
        created () {
            console.log(this.$store.state.transaction_id);
            axios.get(this.$store.state.url + this.$store.state.urlchild.commit + '?token=' + this.$store.state.tokenhongqi + '&id=' + this.$store.state.transaction_id).then((res)=>{
                // console.log(res);
                this.datadetail=res.data.data;
                this.user_name=res.data.data.user_name;
                this.user_mobile=res.data.data.user_mobile;
                this.congif=res.data.data.detail;
                this.name=res.data.data.user_name;
                this.phone=res.data.data.user_mobile;
                // console.log(this.datadetail);
                // console.log(this.congif);
                console.log(111111111111111111111111);
                this.unique_id = res.data.data.unique_id;
                console.log(this.unique_id);
                console.log(111111111111111111111111111);
            })
        },
        filters:{
            pricefilter:function(e){
                return '￥'+e+'元'
            },
            guolvfilter:function(e){
                return '￥'+ e + '/份'
            }
        }
    }
</script>
<style scoped>
 /*1*/
.container{background-color: #fff;padding: 0px 3vw;}
.navleft{padding:0px;font-size: 17px;}
.center_nav{height:9vh;line-height:9vh;background-color: #ffffff;color:#333;border-bottom: 1.4vh solid #eee;}
.center_nav1{height:9vh;line-height:9vh;background-color: #ffffff;color:#333;}
/*2 4*/
.meals_time{height: 6vh;width: 100%;border-bottom: 1px solid #eee;line-height: 6vh;padding:0px 6.7%;}
/*3*/
.meals_time1{height: 6vh;width: 100%;border-bottom: 1px solid #eee;line-height: 16px;padding:0px 6.7%;margin-top: 7px;}
/*5*/
.star{height: 6.9vh;width: 100%;border-top:5px solid #eee;padding:0px 6.7%;line-height: 6.9vh;font-weight: 500;}
/*6*/
.detail_border{width: 100%;height: 60vh;overflow-y: scroll;margin-bottom: 44px;}
.detailorder{width: 100%;height: 12.7vh;padding: 10px;border-bottom: 1px solid #eee;padding:3vh 6.6%;border-bottom: 1px solid #eee;}
.detail_img{width:52px;}
.detail_img1{width: 30px;margin-left: 8px;margin-right: 9px;}
.detail_img2{width: 30px;margin-left: 8px;}
.twodetail{line-height: 25px;margin-left: 10px;}
.twodetail div:nth-child(1){color: #333;font-size: 15px;font-weight: 600;}
.twodetail div:nth-child(2){color: #666666;font-size: 13px;}
.twodetail div:nth-child(3){color: #333;font-size: 15px;font-weight: 500;}
.threedetail{position:relative;top: 10px;}
/*7*/
.allcondition{width: 100%;height: 40px;border-bottom: 1px solid #eee;padding:3vh 6.6%;line-height: 4px;}
/*8*/
.bottomnav{text-align: center;position:fixed;bottom: 0px;width: 100%;height:44px;border-top: 1px solid #eee;background-color: white;}
.bottomnav>div{margin: 0px;}
.bottom_one{width: 49%;display: inline-block;height: 44px;line-height: 44px;color:#faa934}
.bottom_two{width: 49%;display: inline-block;height: 44px;line-height: 44px;background-color: #faa934;color: white;font-size: 17px;}
/*9信息弹出框*/
.allpayshow{position:fixed;bottom: 0px;height:100%;width: 100%;background: rgba(0, 0, 0, 0.5)}
.allpayshow_floor{width: 100%;position:absolute;opacity: 1;background-color:white;height:55vh;top: 50%;margin-top: -25vh;}
.main{ width: 100%;}
.box-line{ padding: 0 15px; position: relative}
.bd-t10{border-top: 10px solid #eee;}
.box-content{ height: 45px; border-bottom: 1px solid #ccc; position: relative; line-height: 44px;}
.box-input{ height: 44px; padding: 0 60px 0 60px;}
.box-input input{ width: 100%; border:none; height: 44px; line-height: 44px;}
.box-text{ position: absolute; display: block; width: 60px; }
.box-button{ position: absolute; display: block; width: 60px; height: 32px; line-height: 32px; top:6px; right: 0; background: #f8f8f8; 
            border: 1px solid #dedede; border-radius: 3px;}
.box-button.active{background: #dfdfdf; color: #818181}

.button-submit{ width: 100%; height: 6.7vh; font-size: 114.5%; border-radius: 5px; background: #faa934; color: #fff; border:none;}
.button-submit.active{ color: rgba(255,255,255,0.65)}
.pb44{ padding-bottom: 54px;}
.copyright{ position: fixed; bottom: 0; height: 44px; line-height: 44px; width: 100%; padding: 0 15px; text-align: center;}
.xiugai{font-size: 17px;}
</style>